<template>
    <div>
      <h2>父组件的变量是一个String类型（loginUser)，并且有默认值</h2>
      <h2>父向子组件传值：{{loginUser}}</h2>
      <button @click="updateLoginUser">修改父组件的值</button>
      <div style="background: #ccddff">
        <h3>这是子组件区域</h3>
        <demo02-children loginUser="loginUser"></demo02-children>
        <demo02-children :loginUser="loginUser"></demo02-children>
        <h2>父向子组件传值：{{loginUser2}}</h2>
        <demo02-children :loginUser="loginUser2"></demo02-children>
      </div>
    </div>
</template>

<script>
import Demo02Children from './demo02-children.vue'
export default {
  name: 'demo02',
  components: {
    Demo02Children
  },
  data () {
    return {
      loginUser: null,
      loginUser2: { username: 'admin', password: 'aaaaaa' }
    }
  },
  methods: {
    updateLoginUser () {
      this.loginUser = { username: 'admin', password: Math.random() }
    }
  }
}
</script>

<style scoped>

</style>
